<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" :src="imgObj" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="white" @click="$router.push({path:'/search'})" />
      </template>
    </van-nav-bar>
    <div class="main">
      <van-tabs
        @click="articleClickFn"
        v-model="active"
        animated
        sticky
        offset-top="1.226667rem"
      >
        <van-tab
          :title="obj.name"
          :name="obj.id"
          v-for="obj in channelList"
          :key="obj.id"
        >
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              offset="50"
              :immediate-check="ischeck"
            >
              <ArticleList :arr="articleList" @removeE="removeFn" @click="articleClickFn" /> </van-list
          ></van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 右侧的编辑频道的小图标 -->
    <van-icon
      name="plus"
      size="0.37333334rem"
      class="moreChannels"
      @click="show = true"

    />
    <!--弹出层 管理 -->
    <!-- @closed="$refs.edit.show=false" 弹出层关闭后要调用的方法 让他的show变为false会重置编辑栏状态-->
    <van-popup v-model="show" @closed="$refs.edit.show=false">
       <!-- 内容又自己用div框起来了 -->
      <div class="popup-container">
        <!-- 弹出层的主体区域 -->
        <div class="pop-body">
          <ChannelEdit :userChannelList="channelList"   @closePop="show = false" ref="edit" @ccid="ccidFn"></ChannelEdit>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 以webpack的方式导入图片 >8kb直接导入图片 <8kb 直接转换成base64
import imgObj from '@/assets/logo.png'
import {
  homeChannelListAPI,
  articleListAPI,
  articleDislikesAPI,
  articleReportsAPI
} from '@/api'
import ArticleList from './Article/components/ArticleList.vue'
import ChannelEdit from './Article/components/ChannelEdit.vue'
import { getFormateTime } from '@/utils/date'
import { MyNotify } from '@/utils/Notify'
const cacheObj = {} // 缓存对象
export default {
  name: '',
  data () {
    return {
      imgObj, // name和value 一样可以省略只写一个
      active: 0,
      channelList: [], // 用户已选频道列表
      articleList: [], // 文章列表
      channelId: 0, // 频道列表(默认0就是推荐频道)
      loading: false, // 底部加载状态
      finished: false, // 底部是否全部加载
      nextTime: null, // 下一页的第一条发布时间
      isLoading: false, // 下拉刷新的默认值
      ischeck: false, // 是否在初始化时立即执行滚动位置检查默认是true 这里改为false
      show: false // 弹出层的管理 是否 显示
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  async created () {
    const res = await homeChannelListAPI()
    console.log(res)
    this.channelList = res.data.data.channels
    this.getAllArticlList()
  },
  methods: {
    getFormateTime,
    // 通过id得到所有的文章列表
    async getAllArticlList () {
      if (cacheObj[this.channelId]?.arr && this.loading === false) {
        this.articleList = cacheObj[this.channelId].arr // 先从缓存中取数据
        this.nextTime = cacheObj[this.channelId]?.nextTime // 为了请求下一页的数据,先从缓存中获取,如果么有直接空
        // 如果缓存中有数据的话直接滚动到相应高度
        // 因为DOM更新是异步的所以要等DOM更新完之后才能获取数据
        this.$nextTick(() => {
          window.scrollTo(0, cacheObj[this.channelId].sTop)
        })
      } else { // 没有找到对应的id的缓存数据
        const res2 = await articleListAPI({
          channel_id: this.channelId,
          timestamp: this.nextTime
        })
        if (res2.data.data.results === 0) {
          this.finished = true // 全部加载完成后
          return // 阻止代码继续执行
        }
        // 时间预处理
        res2.data.data.results.forEach((item) => {
          item.pubdate = this.getFormateTime(item.pubdate)
        })
        // 把上一页和下一页的数据组合起来
        this.articleList = [...this.articleList, ...res2.data.data.results]
        cacheObj[this.channelId] = {} // 先设置一个空的对象
        cacheObj[this.channelId].arr = this.articleList
        this.nextTime = res2.data.data.pre_timestamp
        cacheObj[this.channelId].nextTime = res2.data.data.pre_timestamp
        // 为了让getAllArticlList 再次出发需要传递一个事件

        // console.log(res2)
        this.loading = false
        this.isLoading = false
      }
    },

    // 单击事件之后切换当前频道
    // name表示的是 子类name属性传递的id值
    articleClickFn (id) {
    // 保存上个频道滚动的页面高度
      cacheObj[this.channelId].sTop = window.scrollY

      this.channelId = id
      // this.nextTime = null // 为了请求第一页的数据

      this.articleList = [] // 原来的文章列表清空
      this.nextTime = null // 请求第一页的数据
      // 为了确保切换频道后的数据是本频道的需要清空文章列表和下一页的时间
      // 因为 getAllArticlList中的articleList 是组和数据
      console.log(cacheObj)
      this.getAllArticlList()
    },
    // 下拉加载
    onLoad () {
      // 如果没有 :immediate-check="ischeck" 属性下拉初始是内容是否加载 要写成判断语句
      if (this.articleList.length > 0) {
        this.getAllArticlList()
      }
      // 下拉初始化是false的时候可以直接调用,id不会重复
      // this.getAllArticlList()
    },
    // 上拉刷新
    onRefresh () {
      this.nextTime = null // 为了请求第一页的数据
      this.articleList = [] // 原来的文章列表清空
      cacheObj[this.channelId].nextTime = null // 清空cacheObj缓存中的数据
      cacheObj[this.channelId].arr = null
      this.getAllArticlList() // 再次发起请求获取最新数据
    },

    async removeFn (item, action) {
      // 获取 articleList中当前对象在数组中的索引
      const index = this.articleList.findIndex((val) => {
        return val.art_id === item.art_id
      })
      // 前端获取到索引后删除对应的对象
      if (index !== -1) {
        this.articleList.splice(index, 1)
      }
      /*  *********调用接口************** */
      if (action.name === '不感兴趣') {
        // 调用 不感兴趣接口 传给后台要删除的数据
        const res = await articleDislikesAPI({ artId: item.art_id })
        MyNotify({ type: 'success', message: '反馈成功' })
        console.log(res)
      } else {
        // 调用 文章举报接口 传给后台要举报的数据
        const res = await articleReportsAPI({
          artId: item.art_id,
          type: action.value
        })
        MyNotify({ type: 'success', message: '反馈成功' })
        console.log(res)
      }
    },
    // popup 弹窗点击相应的频道后,传给前台直接切换
    ccidFn (obj) {
      this.active = obj.id
      this.articleClickFn(obj.id)
    }
  },
  // 路由监控页面跳转出去时的窗口滚动高度
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    from.meta.top = window.scrollY
    next()
  },
  activated () {
    this.$nextTick(() => {
      console.log(this.$route.meta.top)
      if (this.$route.meta.isScroll) {
        // 页面窗口滚动得到的距离
        window.scrollTo(0, this.$route.meta.top)
      }
    })
  }
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 46px;
}
.van-popup {
  width: 100%;
  height: 100%;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
</style>
